<template>
	<div>
		<!-- 搜索器 -->
		<div class="mt-20px text-14px">
			<div
				class="flex items-center border border-1px border-solid border-#E5E6EB text-#B5B5B5 rounded-10px p-2px justify-between w-310px">
				<div value="1" class="w-100px h-32px flex items-center justify-center cursor-pointer"
					:class="{ 'item-after': payMethods === 1 }" @click="selectedPayMethods(1)">
					全部
				</div>
				<div value="2" class="w-100px h-32px flex items-center justify-center cursor-pointer"
					:class="{ 'item-after': payMethods === 2 }" @click="selectedPayMethods(2)">
					未付款
				</div>
				<div value="3" class="w-100px h-32px flex items-center justify-center cursor-pointer"
					:class="{ 'item-after': payMethods === 3 }" @click="selectedPayMethods(3)">
					已付款
				</div>
			</div>
		</div>
		<!-- 时间搜索器 -->
		<div class="mt-10px mb-10px">
			<SelectTimer></SelectTimer>
		</div>
		<!-- 表格 -->
		<div class="mt-20px">
			<C2cTable></C2cTable>
		</div>
	</div>
</template>
<script setup lang="ts">
import C2cTable from './C2cTable.vue';
import SelectTimer from '../../../components/SelectTimer.vue';
import { ref } from 'vue';

// 1 全部  2 未付款  3 已付款
const payMethods = ref<1 | 2 | 3>(1);

const selectedPayMethods = (value: 1 | 2 | 3) => {
	payMethods.value = value;
};

const timeItem = ref<any[]>([
	"近1个月", "近3个月", "近1年"
]);

const selectedTimeItem = ref<any>("近1个月");
</script>
<style lang="scss" scoped>
.item-after {
	position: relative;
	z-index: 2;
	color: #FFFFFF;

	&::after {
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 8px;
		background-color: #114CEE;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
}
</style>
